﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2-12</title>
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            //文本框
            var $alltext = $("#form1 :text");
            var length = $alltext.length;


            var lengths = $(":text").length;

            //密码框
            var $allpassword = $("#form1 :password");
            //单选框
            var $allradio = $("#form1 :radio");
            //多选框
            var $allcheckbox = $("#form1 :checkbox");
            //提交按钮
            var $allsubmit = $("#form1 :submit");
            //图片
            var $allimage = $("#form1 :image");
            //重置类型
            var $allreset = $("#form1 :reset");
            //按钮
            var $allbutton = $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
            //file
            var $allfile = $("#form1 :file");
            //隐藏域
            var $allhidden = $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
            //选项
            var $allselect = $("#form1 select");
            //文本域
            var $alltextarea = $("#form1 textarea");
            //input标签
            var $inputs = $("#form1 input");
            //:input元素
            var $AllInputs = $("#form1 :input");

            $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
                    .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
                    .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
                    .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
                    .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
                    .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
                    .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
                    .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
                    .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
                    .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
                    .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
                    .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
                    .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
                    .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
                    .css("color", "red")

            $("form").submit(function () { return false; }); // return false;不能提交.

        });
        //]]>
    </script>
</head>
<body>
    <form id="form1" action="#">
        <input type="button" value="按钮" /><br />
        <input type="checkbox" name="c" />1<input type="checkbox" name="c" />2<input type="checkbox" name="c" />3<br />
        <input type="file" /><br />
        <input type="hidden" /><div style="display:none">test</div><br />
        <input type="image" /><br />
        <input type="password" /><br />
        <input type="radio" name="a" />1<input type="radio" name="a" />2<br />
        <input type="reset" /><br />
        <input type="submit" value="提交" /><br />
        <input type="text" /><br />
        <select><option>Option</option></select><br />
        <textarea rows="5" cols="20"></textarea><br />
        <button>按钮</button><br />
    </form>
    <div></div>
</body>
</html>
